<nz-card>
  <nz-tabset nzType="card">
    <!--实物-->
    <nz-tab [nzTitle]="'实物'" (nzSelect)="tabClick(1)">
    </nz-tab>
    <!--虚拟-->
    <nz-tab [nzTitle]="'虚拟'" (nzSelect)="tabClick(2)">
    </nz-tab>
  </nz-tabset>

  <div>
    <div class="searchItem">
      <label>商品：</label>
      <input nz-input placeholder="请输入商品编号或名称" [(ngModel)]="query.goods"/>
    </div>
    <div class="searchItem">
      <label>状态：</label>
      <nz-select [(ngModel)]="query.state" nzAllowClear nzPlaceHolder="请选择" [nzBackdrop]="true">
        <nz-option [nzValue]="1" nzLabel="已上架"></nz-option>
        <nz-option [nzValue]="2" nzLabel="已下架"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label>创建时间：</label>
      <nz-range-picker nzFormat="yyyy-MM-dd" [(ngModel)]="query.time"></nz-range-picker>
    </div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
      <button nz-button nzType="default" (click)="resetCondition()">重置</button>
    </div>
    <div>
      <div class="oRow">
        <button nz-button nzType="primary" routerLink="/promotionshare/operate-editGoods">新增商品</button>
        <button nz-button nzType="default" (click)="changeGoodsStatusAll(0)">批量上架</button>
        <button nz-button nzType="primary" (click)="changeGoodsStatusAll(1)" nzDanger>批量下架</button>
      </div>
    </div>
  </div>

  <!--表格-->
  <nz-table
    #table
    nzSize="small"
    nzShowSizeChanger
    nzShowQuickJumper
    nzOuterBordered
    [nzData]="tableData.records"
    [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
    [nzTotal]="tableData.total"
    [(nzPageIndex)]="query.page"
    [(nzPageSize)]="query.pageSize"
    [nzFrontPagination]="false"
    [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="onPageIndexChange($event)"
    (nzPageSizeChange)="onPageSizeChange($event)"
  >
    <thead>
    <tr>
      <th nzWidth="100px" [nzChecked]="tableData.checked"
          [nzIndeterminate]="tableData.indeterminate" (nzCheckedChange)="onAllChecked($event)"
          nzLeft></th>
      <th nzAlign="center">序号</th>
      <th nzAlign="center">ID</th>
      <th nzAlign="center">商品</th>
      <th nzAlign="center">分类</th>
      <th nzAlign="center">商品价格</th>
      <th nzAlign="center">兑换积分</th>
      <th nzAlign="center">库存</th>
      <th nzAlign="center">已兑换数量</th>
      <th nzAlign="center">虚拟叠加兑换数量</th>
      <th nzAlign="center">兑换限制</th>
      <th nzAlign="center">创建时间</th>
      <th nzAlign="center">状态</th>
      <th nzAlign="center" nzWidth="160px">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of table.data;let index = index">
      <td [nzChecked]="tableData.setOfCheckedId.has(data['id'])"
          (nzCheckedChange)="onItemChecked(data['id'], $event)" nzLeft></td>
      <td nzAlign="center">{{ index + 1 }}</td>
      <td nzAlign="center">{{ data['id'] }}</td>
      <td nzAlign="center">
        <img
          nz-image
          width="60px"
          height="60px"
          [nzSrc]="data['icon']"
        />
      </td>
      <td nzAlign="center">{{ TYPE[data['type']]}}</td>
      <td nzAlign="center">{{ data['price'] }}</td>
      <td nzAlign="center">{{ data['integral'] }}</td>
      <td nzAlign="center">{{ data['stock'] }}</td>
      <td nzAlign="center">{{ data['salesVolume'] }}</td>
      <td nzAlign="center">{{ data['salesVolumeBase'] }}</td>
      <td nzAlign="center">VIP{{ data['vipLevel'] }}</td>
      <td nzAlign="center">{{ data['createTime'] }}</td>
      <td nzAlign="center" [attr.statusColor]="data['status']">{{ data['status'] === 1 ? '已上架' : '已下架' }}</td>
      <td nzAlign="center">
        <a  [attr.statusColor]="2" *ngIf="data['status']===1" style="color: red" (click)="changeGoodsStatus(data['id'],1)">下架</a>
        <a *ngIf="data['status']===2" (click)="changeGoodsStatus(data['id'],0)">上架</a>
        <a (click)="modifyGoods(data)">编辑</a>

        <a  [attr.statusColor]="2" nzPopconfirmPlacement="top"
           nz-popconfirm
           nzPopconfirmTitle="确认删除?"
           nzOkText="确认"
           (nzOnConfirm)="deleteGoods(data['id'])"
           nzCancelText="取消">删除</a>
      </td>
    </tr>
    </tbody>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </nz-table>
</nz-card>
